<template>
	<view class="page">
		<headerinfo></headerinfo>
		<!-- <headertop :inv="5"></headertop> -->
		<!-- 页面内容 -->
		<!-- 用户信息 -->
		<scroll-view scroll-y @scroll="onPageScroll" class="scroll-content">
			<view class="">
				<user-info ref="userInfo" @share="share" @showRelease="releaseDia = true" />
				<!-- 选项 -->
				<view class="icon_list">
					<u-grid :border="false" col="10" @click="click">
						<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
							<view
								style="display: flex;align-items: center;justify-content: center;flex-direction: column;"
								:class="baseListIndex == 4?'shenghuo':''">
								<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="baseListItem.name"
									:size="22"></u-icon>
								<text class="grid-text">{{ baseListItem.title }}</text>
							</view>

						</u-grid-item>
					</u-grid>
				</view>
			</view>


			<!-- <icon-check @showfankuiDia="fankuiDia = true" /> -->

			<!-- 滑动列表 -->
			<view class="o-content">
				<view class="tab-content">
					<articlelist ref="articlelist" :isFixed="isFixed" :isMy="true"></articlelist>
				</view>
			</view>
		</scroll-view>


		<u-popup :show="releaseDia" round="20" @close="releaseDia = false">
			<release @closeDia="closeDia" @toDraft="toDraft"></release>
		</u-popup>

		<view class="fankuiBox" @click="feedback">
			<image src="../../../static/images/jiqiren.png" mode="widthFix" class="jiqiren"></image>
			<span>我要反馈</span>
		</view>

		<u-popup :show="fankuiDia" :round="10" mode="center" @close="fankuiDia = false" bgColor="transparent">
			<wechatqun></wechatqun>
		</u-popup>

		<uni-popup ref="popup" type="bottom">
			<share @closeDia="closeDia"></share>
		</uni-popup>

	</view>
</template>

<script>
	import userInfo from './components/user_info.vue'
	import articlelist from './components/articlelist.vue'
	import release from '@/components/release.vue';
	import wechatqun from '@/components/wechatqun.vue';
	import share from '@/components/share/share.vue'
	export default {
		components: {
			userInfo,
			articlelist,
			release,
			wechatqun,
			share,
			
		},
		data() {
			return {
				scrollTop: 0,
				isFixed: false,
				fankuiDia: false,
				releaseDia: false,
				tabIndex: 0,

				swiperheight: 400,
				goNew: false,

				userNewCalendar: true,
				baseList: [{
						name: 'attach',
						title: '创作中心',
						path: '/pages/tabbar/mine/myopus'
					},
					{
						name: 'star',
						title: '收藏',
						path: '/pages/tabbar/mine/collection'
					},
					{
						name: 'clock',
						title: '浏览历史',
						path: '/pages/tabbar/mine/footprint'
					},
					{
						name: 'camera',
						title: '家庭日历',
						path: '/pages/calendar/index'
					},
					{
						name: 'bookmark',
						title: '我的生活',
						path: '/pages/life/index'
					},
					{
						name: 'bag',
						title: '我的草稿',
						path: '/pages/draft/index'
					},
					{
						name: 'chat',
						title: 'AI管家',
					},
					{
						name: 'coupon',
						title: '我要吐槽',
					},
					{
						name: 'coupon',
						title: '纪念馆',
						path: '/pagesobit/obit/index'
					}
				]
			};
		},
		onLoad() {
			this.getConfig()
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.articlelist.getAllCategories()
				this.getData()
				uni.pageScrollTo({
					scrollTop: 0, //滚动到页面的目标位置
					duration: 300
				})
			})
		},
		watch: {
			scrollTop(newLength, oldLength) {
				console.log(newLength)
				if (newLength> 400) {
					this.isFixed = true
				} else {
					this.isFixed = false
				}
			}
		},
		methods: {
			onPageScroll(event) {
				// 滚动事件处理逻辑
				this.scrollTop = event.scrollTop
				
				// 根据scrollTop的值来执行相应操作
			},
			getConfig() {
				this.userNewCalendar = uni.getStorageSync('userNewCalendar')
			},
			click(name) {

				let url = this.baseList[name].path

				let title = this.baseList[name].title

				if (title == '我要吐槽') {
					// #ifdef MP-WEIXIN
					this.$emit('showfankuiDia')
					this.fankuiDia = true
					// #endif

					// #ifndef MP-WEIXIN
					let productId = 597063
					window.location = 'https://support.qq.com/product/' + productId
					// #endif

				} else if (title == '家庭日历') {
					if (this.userNewCalendar) {
						uni.navigateTo({
							url: '/pages/calendar/index2'
						})
					} else {
						uni.navigateTo({
							url: '/pages/calendar/index'
						})
					}

				} else if (title == 'AI管家') {
					uni.navigateTo({
						url: '/pages/chat/index'
					})
				} else {
					uni.navigateTo({
						url
					})
				}

			},
			// 分享到朋友圈
			onShareTimeline() {
				let data = {
					title: '来自好友的分享', // 默认是小程序的名称
					path: `/pages/tabbar/index/index`, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: '', // 图片封面，本地文件路径、网络图片路，支持PNG及JPG，默认当前页面截图，显示图片长宽比是 5:4。
					success: res => {
						// 分享成功
						if (res.errMsg == 'shareAppMessage:ok') {}
					},
					fail: res => {
						// 用户取消
						if (res.errMsg == 'shareAppMessage:fail cancel') {}
						// 分享失败
						if (res.errMsg == 'shareAppMessage:fail') {}
					},
					complete: res => {}
				}
				return data
			},
			// 分享给好友
			onShareAppMessage(options) {

				// 设置菜单中的转发按钮触发转发事件时的转发内容
				var shareObj = {
					title: '来自好友的分享', // 默认是小程序的名称(可以写slogan等)
					desc: '', // 小程序的描述
					path: `/pages/tabbar/index/index`, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: '', // 图片封面，本地文件路径、网络图片路，支持PNG及JPG，默认当前页面截图，显示图片长宽比是 5:4。
					success: function(res) {
						// 转发成功之后的回调

						if (res.errMsg == 'shareAppMessage:ok') {
							console.log(res)

						}
					},

				}

				// 返回shareObj
				return shareObj;
			},
			share() {
				this.$refs.popup.open('bottom')
			},
			closeDia() {
				this.$refs.popup.close()
			},
			getData() {
				this.$api.myInfo().then(res => {
					this.$refs.userInfo.init(res)
				})
			},
			tabClick(index) {
				this.tabIndex = index
			},
			tabChange(e) {
				console.log(e);
				var index = e.detail.current;
				this.tabIndex = index;
			},
			closeDia() {
				this.releaseDia = false
			},
			toDraft() {
				uni.navigateTo({
					url: '/pages/draft/index'
				});
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			feedback() {
				// #ifdef MP-WEIXIN
				this.fankuiDia = true
				// #endif

				// #ifndef MP-WEIXIN
				let productId = 597063
				window.location = 'https://support.qq.com/product/' + productId
				// #endif

			}
		}
	};
</script>

<style>
	page {
		background-color: #ffffff!important;
	}
</style>
<style lang="scss" scoped>
	.page{
		background-color: #ffffff!important;
	}
	.grid-text {
		font-size: 14px;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.icon_list {
		padding-top: 10rpx;
		background-color: #fff;
		padding-bottom: 10rpx;
		width: 60%;
		margin: 0 auto;
		cursor: pointer;
	}

	.fankuiBox {
		position: fixed;


		bottom: 200rpx;
		right: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 100001;
		color: #8f8f8f;
	}

	.jiqiren {
		width: 100rpx;
		height: auto;
	}

	.page {
		min-height: auto;
	}

	.o-content {
		background-color: #fff;
		z-index: 10;
	}

	.fiexBox {
		position: fixed;
		top: 0;
		width: 100%;
	}

	.tabMenu {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		height: 90rpx;
		border-bottom: 1px solid #f8f8f8;
		position: relative;

		.iconfont {
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.tab-list {
		display: inline-block;
		padding: 20rpx;
		text-align: center;
		box-sizing: border-box;
		margin: 0 20rpx;
		color: #333;
		font-size: 30rpx;
	}


	.actived {
		color: #000;
		border-bottom: 2px solid red;
	}
</style>